<?php 
   include_once "config.php";
   include_once "functions.php";
   //获取传递过来的id值
   $categoryId = $_GET["categoryId"];
  //  echo $categoryId;
   //根据id查询数据库
   //动态生成结构

   //连接数据库
  //  $conn = mysqli_connect(DB_HOST,DB_USER,DB_PWD,DB_NAME);
    $conn = connect();
   //sql语句
   $sql = "SELECT p.id, p.title,p.feature,p.created,p.content,p.views,p.likes,u.nickname,c.`name`,
          (SELECT COUNT(id) FROM comments WHERE post_id = p.id ) as commtentsCounts
          FROM posts p
   
          LEFT JOIN users u on u.id=p.user_id
          LEFT JOIN categories c on c.id=p.category_id
          where p.category_id = {$categoryId}
          LIMIT 10";
   //执行sql语句   
  //  $result = mysqli_query($conn,$sql);
  //  $resultArr = [];
  //  while($row = mysqli_fetch_assoc($result)){
  //     $resultArr[] = $row;
  //  }
  $resultArr = querySelect($conn,$sql);
  //  print_r($resultArr);
?>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>阿里百秀-发现生活，发现美!</title>
  <link rel="stylesheet" href="static/assets/css/style.css">
  <link rel="stylesheet" href="static/assets/vendors/font-awesome/css/font-awesome.css">

</head>
<body>
  <div class="wrapper">
    <div class="topnav">
      <ul>
        <li><a href="list.php"><i class="fa fa-glass"></i>奇趣事</a></li>
        <li><a href="list.php"><i class="fa fa-phone"></i>潮科技</a></li>
        <li><a href="list.php"><i class="fa fa-fire"></i>会生活</a></li>
        <li><a href="list.php"><i class="fa fa-gift"></i>美奇迹</a></li>
      </ul>
    </div>
    <!-- 这是左边公共部分 -->
    <?php include_once "public/_header.php" ?>
    <!-- 这是右边公共部分 -->
    <?php include_once "public/_aside.php" ?>
    <div class="content">
      <div class="panel new">
        <h3><?php echo $resultArr[0]['name']?></h3>
        <?php foreach($resultArr as $value) : ?>
            <div class="entry">
              <div class="head">
                <a href="detail.php?postsId=<?php echo $value['id'] ?>"><?php echo $value['title'] ?></a>
              </div>
              <div class="main">
                <p class="info"><?php echo $value['nickname'] ?> 发表于 <?php echo $value['created'] ?></p>
                <p class="brief"><?php echo $value['content'] ?></p>
                <p class="extra">
                  <span class="reading">阅读(<?php echo $value['views'] ?>)</span>
                  <span class="comment">评论(<?php echo $value['commtentsCounts'] ?>)</span>
                  <a href="detail.php" class="like">
                    <i class="fa fa-thumbs-up"></i>
                    <span>赞(<?php echo $value['likes'] ?>)</span>
                  </a>
                  <a href="javascript:;" class="tags">
                    分类：<span><?php echo $value['name'] ?></span>
                  </a>
                </p>
                <a href="javascript:;" class="thumb">
                  <img src="<?php echo $value['feature'] ?>" alt="">
                </a>
              </div>
            </div>
        <?php endforeach ?>

        <div class="loading">
            <button class="btn">加载更多...</button>
        </div>
      </div>
    </div>
    <div class="footer">
      <p>© 2016 XIU主题演示 本站主题由 themebetter 提供</p>
    </div>
  </div>
</body>
<script src="static/assets/vendors/jquery/jquery.min.js"></script>
<script>
    //假设是第一次点击加载
    var currentNum = 1;
    //获取分类的id,在地址栏中
    var categoryId = location.search.split("=")[1];
    //加载更多绑定事件
    $(function(){
      $(".loading .btn").on("click",function(){
          //点击加载更多,请求第二次的十条数据,再点第三次...
          currentNum++;
          //发送ajax拿到数据渲染到页面
          $.ajax({
            type:"post",
            url:"api/_getMorePosts.php",
            data:{
              categoryId:categoryId,//分类的id
              currentPage:currentNum,//第几次点击加载
              pageSize:100//每次多少条数据
            },
            dataType:"json",
            success:function(result){
                console.log(result);
                //判断是不是已经拿到了数据,数据的状态码是不是为1
                if(result.code == 1){
                   //获取数据
                   var data = result.data;
                   //遍历获取到的数据
                   $.each(data,function(index,val){
                      var str = `<div class="entry">
                                    <div class="head">
                                      <a href="detail.php?postsId=${val.id}">${val.title}</a>
                                    </div>
                                    <div class="main">
                                      <p class="info">${val.nickname} 发表于 ${val.created}</p>
                                      <p class="brief">${val.content}</p>
                                      <p class="extra">
                                        <span class="reading">阅读(${val.views})</span>
                                        <span class="comment">评论(${val.commtentsCounts})</span>
                                        <a href="detail.php" class="like">
                                          <i class="fa fa-thumbs-up"></i>
                                          <span>赞(${val.likes})</span>
                                        </a>
                                        <a href="javascript:;" class="tags">
                                          分类：<span>${val.name}</span>
                                        </a>
                                      </p>
                                      <a href="javascript:;" class="thumb">
                                        <img src="${val.feature}" alt="">
                                      </a>
                                    </div>
                                  </div>`;
                      // 将dom元素转成jQuery对象
                      var entry = $(str);
                      entry.insertBefore('.loading');
                   });
                }
                //计算总共的数据条数
                var maxPage = Math.ceil(result.pageCount / 100); 
                //判断是不是已经到最后一页的数据,如果是就隐藏加载更多这个按钮
                if(maxPage == currentNum){
                    alert("客官,小店数据已加载完!");
                    $(".loading").hide();
                    
                }
            }
          });
      });
    });
    
</script>
</html>  